<template>
  <input type="text" v-model="msg">
  <h1>{{msg}}</h1>
<!--  <button @click="change">点击获取msg</button>-->
</template>

<script>
// 使用组合式AIP

import {reactive, computed, ref, toRefs, watch} from "vue";

export default {
    name: "Demo03",
    setup(){
      // 定义数据属性，相当于之前的data(){}
      /*const data = reactive({
        msg: "大锤",
        // 计算属性
        msgComputed: computed(() =>{
          return data.msg + "_________"
        })
      }); */// 定义data属性
      // 使用ref函数响应式   ref()推荐使用，底层是基于reactive()
      /*const data = ref({
        msg: 0, // 定义属性
        msgComputed: computed(() => {  // 计算属性
          return data.value.msg * 2
        })
      });*/

      const data = reactive({ // 定义属性，相当于之前的data（）{}
        msg: "大锤123456",
        users: [
          {id: 1, uname: "zhangsan", age: 56},
          {id: 2, uname: "李四", age: 86}
        ]
      })

      // 定义方法，相当于之前在methods当中定义方法
      /*function change(){
        alert(data.value.msg);
      }*/
      // 实现属性监听器  相当于之前的watch: {}
      watch(data, (newProVAL, oldProVal) => {
        console.log(newProVAL);
        console.log(oldProVal)
      });


      // 使用return返回属性和方法
      return {
        ...toRefs(data)
      }

    }
  }
</script>

<style scoped>

</style>